<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Accordion.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Accordion.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Accordion.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;메뉴의&nbsp;펼침/닫힘을&nbsp;이용한&nbsp;네비게이션을&nbsp;구현한&nbsp;아코디언&nbsp;컴포넌트
	@author&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	메뉴의&nbsp;펼침/닫힘을&nbsp;이용한&nbsp;네비게이션을&nbsp;구현한&nbsp;아코디언&nbsp;컴포넌트.
	움직임이&nbsp;악기&nbsp;아코디언과&nbsp;비슷하다고&nbsp;하여&nbsp;붙여진&nbsp;Accordion은&nbsp;제목탭과&nbsp;내용탭이&nbsp;쌍으로&nbsp;펼쳐지고&nbsp;접혀지는&nbsp;동작을&nbsp;정의합니다.
	
	@class&nbsp;jindo.Accordion
	@extends&nbsp;jindo.UIComponent
	@uses&nbsp;jindo.Timer
	@uses&nbsp;jindo.Transition
	
	@keyword&nbsp;accordion,&nbsp;accordian,&nbsp;아코디언
**/
jindo.Accordion&nbsp;=&nbsp;jindo.$Class({
	/**
		Accordion&nbsp;컴포넌트를&nbsp;생성한다.
		@constructor
		@param&nbsp;{String&nbsp;|&nbsp;HTMLElement}&nbsp;el&nbsp;Accordian&nbsp;컴포넌트를&nbsp;적용할&nbsp;레이어의&nbsp;id&nbsp;혹은&nbsp;레이어&nbsp;자체
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;초기화&nbsp;옵션&nbsp;설정을&nbsp;위한&nbsp;객체.
			@param&nbsp;{String}&nbsp;[htOption.sClassPrefix=&quot;accordion-&quot;]&nbsp;초기&nbsp;HTML/CSS구조에서&nbsp;필요한&nbsp;className&nbsp;앞에&nbsp;붙는&nbsp;prefix를&nbsp;정의
			@param&nbsp;{String}&nbsp;[htOption.sDirection=&quot;vertical&quot;]&nbsp;Accordion이&nbsp;펼쳐질&nbsp;방향&lt;ul&gt;&lt;li&gt;&quot;vertical&quot;&nbsp;:&nbsp;세로&lt;/li&gt;&lt;li&gt;&quot;horizontal&quot;&nbsp;:&nbsp;가로&lt;/li&gt;&lt;/ul&gt;
			@param&nbsp;{String}&nbsp;[htOption.sExpandEvent=&quot;click&quot;]&nbsp;펼치기위한&nbsp;마우스이벤트명
			@param&nbsp;{Number}&nbsp;[htOption.nDefaultIndex=null]&nbsp;디폴트로&nbsp;확장될&nbsp;인덱스,&nbsp;null시&nbsp;확장하지&nbsp;않음
			@param&nbsp;{Boolean}&nbsp;[htOption.bToggle=false]&nbsp;핸들러에&nbsp;마우스이벤트&nbsp;발생시&nbsp;expand/contract&nbsp;토글&nbsp;여부.&lt;br/&gt;sExpandEvent가&nbsp;&quot;mouseover&quot;인&nbsp;경우는&nbsp;사용하지&nbsp;않는&nbsp;것이&nbsp;좋다.
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=300]&nbsp;펼쳐지거나&nbsp;접힐&nbsp;때&nbsp;쓰이는&nbsp;Transition&nbsp;지속&nbsp;시간&lt;br/&gt;-&nbsp;단위는&nbsp;ms(1000이&nbsp;1초)
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=30]&nbsp;펼쳐지거나&nbsp;접힐&nbsp;때&nbsp;쓰이는&nbsp;Transition의&nbsp;FPS(Frame&nbsp;Per&nbsp;Second)&lt;br/&gt;-&nbsp;단위는&nbsp;초
			@param&nbsp;{Function}&nbsp;[htOption.fExpandEffect=jindo.Effect.cubicEaseOut]&nbsp;펼쳐질&nbsp;때&nbsp;쓰이는&nbsp;Transition의&nbsp;효과
			@param&nbsp;{Function}&nbsp;[htOption.fContractEffect=jindo.Effect.cubicEaseIn]&nbsp;접힐&nbsp;때&nbsp;쓰이는&nbsp;Transition의&nbsp;효과
			@param&nbsp;{Number}&nbsp;[htOption.nExpandDelay=0]&nbsp;펼쳐질&nbsp;때&nbsp;지연되는&nbsp;시간&lt;br/&gt;-&nbsp;단위는&nbsp;ms(1000이&nbsp;1초)
			@param&nbsp;{Number}&nbsp;[htOption.nContractDelay=0]&nbsp;접혀질&nbsp;때&nbsp;지연되는&nbsp;시간&lt;br/&gt;-&nbsp;단위는&nbsp;ms(1000이&nbsp;1초)
			@param&nbsp;{Boolean}&nbsp;[htOption.bActivateOnload=true]&nbsp;로딩과&nbsp;동시에&nbsp;활성화할&nbsp;것인지&nbsp;여부
	**/
	$init&nbsp;:&nbsp;function(el,&nbsp;htOption)&nbsp;{
		/**
			Accordian&nbsp;컴포넌트가&nbsp;적용될&nbsp;레이어
			
			@type&nbsp;{HTMLElement}
		**/
		this._el&nbsp;=&nbsp;jindo.$(el);
		this._wel&nbsp;=&nbsp;jindo.$Element(this._el);
		this.option({
			sClassPrefix&nbsp;:&nbsp;&quot;accordion-&quot;,
			sDirection&nbsp;:&nbsp;&quot;vertical&quot;,
			sExpandEvent&nbsp;:&nbsp;&quot;click&quot;,
			nDefaultIndex&nbsp;:&nbsp;null,
			bToggle&nbsp;:&nbsp;false,
			nDuration&nbsp;:&nbsp;300,
			nFPS&nbsp;:&nbsp;30,
			fExpandEffect&nbsp;:&nbsp;jindo.Effect.cubicEaseOut,&nbsp;//&nbsp;(Function)&nbsp;펼쳐질때&nbsp;Transition&nbsp;효과의&nbsp;종류
			fContractEffect&nbsp;:&nbsp;jindo.Effect.cubicEaseIn,&nbsp;//&nbsp;(Function)&nbsp;닫혀질때&nbsp;Transition&nbsp;효과의&nbsp;종류
			nExpandDelay&nbsp;:&nbsp;0,
			nContractDelay&nbsp;:&nbsp;0,
			bActivateOnload&nbsp;:&nbsp;true
		});
		this.option(htOption&nbsp;||&nbsp;{});
		
		this._nExpanded&nbsp;=&nbsp;null;
		this._oTimer&nbsp;=&nbsp;new&nbsp;jindo.Timer();
		this._oTransition&nbsp;=&nbsp;new&nbsp;jindo.Transition({&nbsp;bCorrection&nbsp;:&nbsp;true&nbsp;}).fps(this.option(&quot;nFPS&quot;));
		this._wfOnMouseOver&nbsp;=&nbsp;jindo.$Fn(this._onMouseOver,&nbsp;this);
		this._wfOnMouseOut&nbsp;=&nbsp;jindo.$Fn(this._onMouseOut,&nbsp;this);
		this._wfOnExpandEvent&nbsp;=&nbsp;jindo.$Fn(this._onExpandEvent,&nbsp;this);
		if&nbsp;(this.option(&quot;bActivateOnload&quot;))&nbsp;{
			this.activate();
		}
	},
	
	getBaseElement&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._el;
	},
	
	_onActivate&nbsp;:&nbsp;function()&nbsp;{
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;this._wel.preventTapHighlight(true);
		this._wfOnExpandEvent.attach(this._el,&nbsp;this.option(&quot;sExpandEvent&quot;));
		this._wfOnMouseOver.attach(this._el,&nbsp;&quot;mouseover&quot;);
		this._wfOnMouseOut.attach(this._el,&nbsp;&quot;mouseout&quot;);
		var&nbsp;n&nbsp;=&nbsp;this.option(&quot;nDefaultIndex&quot;);
		if&nbsp;(typeof&nbsp;n&nbsp;==&nbsp;&quot;number&quot;)&nbsp;{
			this.expand(n);
		}
	},
	
	_onDeactivate&nbsp;:&nbsp;function()&nbsp;{
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;this._wel.preventTapHighlight(false);
		this._wfOnExpandEvent.detach(this._el,&nbsp;this.option(&quot;sExpandEvent&quot;));
		this._wfOnMouseOver.detach(this._el,&nbsp;&quot;mouseover&quot;);
		this._wfOnMouseOut.detach(this._el,&nbsp;&quot;mouseout&quot;);
	},
	
	_getBlock&nbsp;:&nbsp;function(el)&nbsp;{
		var&nbsp;sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;);
		return&nbsp;(jindo.$Element(el).hasClass(sClassPrefix&nbsp;+&nbsp;&quot;block&quot;))&nbsp;?&nbsp;el&nbsp;:&nbsp;jindo.$$.getSingle(&quot;!&nbsp;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;block&quot;,&nbsp;el);
	},
	
	_onMouseOver&nbsp;:&nbsp;function(we)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;we.element,
			elBlock&nbsp;=&nbsp;this._getBlock(el),
			nIndex&nbsp;=&nbsp;(elBlock)&nbsp;?&nbsp;jindo.$A(this.getAllBlocks()).indexOf(elBlock)&nbsp;:&nbsp;null;
			
		if&nbsp;(typeof&nbsp;nIndex&nbsp;==&nbsp;&quot;number&quot;)&nbsp;{
			var&nbsp;elHandler&nbsp;=&nbsp;this.getHandler(nIndex);
			if&nbsp;(elHandler&nbsp;===&nbsp;elBlock&nbsp;||&nbsp;el&nbsp;===&nbsp;elHandler&nbsp;||&nbsp;jindo.$Element(el).isChildOf(elHandler))&nbsp;{
				/**
					handler에&nbsp;mouseover되었을&nbsp;때&nbsp;발생
					
					@event&nbsp;mouseover
					@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
					@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;Event
					@param&nbsp;{Number}&nbsp;nIndex&nbsp;Block의&nbsp;인덱스
					@param&nbsp;{HTMLElement}&nbsp;elBlock&nbsp;대상&nbsp;Block&nbsp;엘리먼트
					@param&nbsp;{HTMLElement}&nbsp;elHandler&nbsp;대상&nbsp;핸들러&nbsp;엘리먼트
					@example
						//&nbsp;mouseover&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링
						oAccordion.attach(&quot;mouseover&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
				**/
				this.fireEvent(we.type,&nbsp;{
					nIndex:&nbsp;nIndex,
					elBlock&nbsp;:&nbsp;elBlock,
					elHandler&nbsp;:&nbsp;elHandler,
					weEvent&nbsp;:&nbsp;we
				});
			}
		}
	},
	
	_onExpandEvent&nbsp;:&nbsp;function(we)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;we.element,
			elBlock&nbsp;=&nbsp;this._getBlock(el),
			nIndex&nbsp;=&nbsp;(elBlock)&nbsp;?&nbsp;jindo.$A(this.getAllBlocks()).indexOf(elBlock)&nbsp;:&nbsp;null;

		if&nbsp;(typeof&nbsp;nIndex&nbsp;==&nbsp;&quot;number&quot;)&nbsp;{
			var&nbsp;elHandler&nbsp;=&nbsp;this.getHandler(nIndex);
			if&nbsp;(elHandler&nbsp;===&nbsp;elBlock&nbsp;||&nbsp;el&nbsp;===&nbsp;elHandler&nbsp;||&nbsp;jindo.$Element(el).isChildOf(elHandler))&nbsp;{
				if&nbsp;(this.option(&quot;bToggle&quot;)&nbsp;&amp;&amp;&nbsp;this.getExpanded()&nbsp;===&nbsp;nIndex&nbsp;)&nbsp;{
					this.contractAll();
				}&nbsp;else&nbsp;{
					this.expand(nIndex);
				}
			}
		}
	},
	
	_onMouseOut&nbsp;:&nbsp;function(we)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;we.element,
			elBlock&nbsp;=&nbsp;this._getBlock(el),
			nIndex&nbsp;=&nbsp;(elBlock)&nbsp;?&nbsp;jindo.$Element(elBlock).parent().indexOf(elBlock)&nbsp;:&nbsp;null;
			
		if&nbsp;(elBlock&nbsp;&amp;&amp;&nbsp;typeof&nbsp;nIndex&nbsp;==&nbsp;&quot;number&quot;)&nbsp;{
			/**
				handler에&nbsp;mouseover되었을&nbsp;때&nbsp;발생
				
				@event&nbsp;mouseout
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;Event
				@param&nbsp;{Number}&nbsp;nIndex&nbsp;Block의&nbsp;인덱스
				@param&nbsp;{HTMLElement}&nbsp;elBlock&nbsp;대상&nbsp;Block&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elHandler&nbsp;대상&nbsp;핸들러&nbsp;엘리먼트
				@example
					//&nbsp;mouseout&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링
					oAccordion.attach(&quot;mouseout&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
					//&nbsp;mouseout시&nbsp;모두&nbsp;접혀지게&nbsp;동작하려면&nbsp;아래와&nbsp;같이&nbsp;설정합니다
					oAccordion.attach(&quot;mouseout&quot;,&nbsp;function(oCustomEvent)&nbsp;{
						this.contractAll();
					});
			**/
			this.fireEvent(we.type,&nbsp;{
				nIndex:&nbsp;nIndex,
				elBlock&nbsp;:&nbsp;elBlock,
				elHandler&nbsp;:&nbsp;this.getHandler(nIndex),
				weEvent&nbsp;:&nbsp;we
			});
		}
	},
	
	_getHeadSize&nbsp;:&nbsp;function(n)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;this.getHead(n);
		el.style.zoom&nbsp;=&nbsp;1;&nbsp;//ie&nbsp;rendering&nbsp;bug
		return&nbsp;{&nbsp;width&nbsp;:&nbsp;jindo.$Element(el).width(),&nbsp;height&nbsp;:&nbsp;jindo.$Element(el).height()&nbsp;};
	},
	
	_getBodySize&nbsp;:&nbsp;function(n)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;this.getBody(n);
		el.style.zoom&nbsp;=&nbsp;1;&nbsp;//ie&nbsp;rendering&nbsp;bug
		return&nbsp;{&nbsp;width&nbsp;:&nbsp;jindo.$Element(el).width(),&nbsp;height&nbsp;:&nbsp;jindo.$Element(el).height()&nbsp;};
	},
	
	/**
		Transition&nbsp;컴포넌트의&nbsp;인스턴스를&nbsp;리턴한다.
		
		@method&nbsp;getTransition
		@return&nbsp;{jindo.Transition}&nbsp;Transition&nbsp;컴포넌트의&nbsp;인스턴스
	**/
	getTransition&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oTransition;
	},
	
	/**
		n번째&nbsp;Block을&nbsp;확장한다.
		
		@method&nbsp;expand
		@param&nbsp;{Number}&nbsp;n&nbsp;확장할&nbsp;Block의&nbsp;인덱스&nbsp;(0부터&nbsp;시작)
		@return&nbsp;{this}&nbsp;n번째&nbsp;Block을&nbsp;확장한&nbsp;인스턴스&nbsp;자신
	**/
	expand&nbsp;:&nbsp;function(n)&nbsp;{
		var&nbsp;aBlock&nbsp;=&nbsp;this.getAllBlocks(),
			self&nbsp;=&nbsp;this;
		n&nbsp;=&nbsp;Math.max(0,&nbsp;Math.min(aBlock.length,&nbsp;n));
		if&nbsp;(this.getExpanded()&nbsp;===&nbsp;n)&nbsp;{
			return&nbsp;this;
		}
		
		var&nbsp;ht&nbsp;=&nbsp;{
			nIndex&nbsp;:&nbsp;n,
			elBlock&nbsp;:&nbsp;aBlock[n],
			elHandler&nbsp;:&nbsp;this.getHandler(n)
		};
		/**
			Block이&nbsp;확장되기&nbsp;전에&nbsp;발생
			
			@event&nbsp;beforeExpand
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{Number}&nbsp;nIndex&nbsp;Block의&nbsp;인덱스
			@param&nbsp;{HTMLElement}&nbsp;elBlock&nbsp;대상&nbsp;Block&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;elHandler&nbsp;대상&nbsp;핸들러&nbsp;엘리먼트
			@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;Block이&nbsp;확장되지&nbsp;않음
			@example
				//&nbsp;beforeExpand&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링
				oAccordion.attach(&quot;beforeExpand&quot;,&nbsp;function(oCustomEvent)&nbsp;{
					oCustomEvent.stop();
				});
		**/
		if&nbsp;(this.fireEvent(&quot;beforeExpand&quot;,&nbsp;ht))&nbsp;{
			var&nbsp;fEffect&nbsp;=&nbsp;self.option(&quot;fExpandEffect&quot;),
				aArgs&nbsp;=&nbsp;[this.option(&quot;nDuration&quot;)];
			
			jindo.$A(aBlock).forEach(function(o,i,a){
				var&nbsp;aHeadSize&nbsp;=&nbsp;self._getHeadSize(i),
					aBodySize&nbsp;=&nbsp;self._getBodySize(i);
				
				switch&nbsp;(self.option(&quot;sDirection&quot;))&nbsp;{
					case&nbsp;&quot;vertical&quot;&nbsp;:
						if&nbsp;(i&nbsp;==&nbsp;n)&nbsp;{
							aArgs.push(a[i],&nbsp;{&nbsp;&#39;@height&#39;&nbsp;:&nbsp;fEffect(aBodySize.height&nbsp;+&nbsp;aHeadSize.height&nbsp;+&nbsp;&quot;px&quot;)&nbsp;});
						}&nbsp;else&nbsp;{
							aArgs.push(a[i],&nbsp;{&nbsp;&#39;@height&#39;&nbsp;:&nbsp;fEffect(aHeadSize.height&nbsp;+&nbsp;&quot;px&quot;)&nbsp;});
						}
						break;
					case&nbsp;&quot;horizontal&quot;&nbsp;:
						if&nbsp;(i&nbsp;==&nbsp;n)&nbsp;{
							aArgs.push(a[i],&nbsp;{&nbsp;&#39;@width&#39;:&nbsp;fEffect(aBodySize.width&nbsp;+&nbsp;aHeadSize.width&nbsp;+&nbsp;&quot;px&quot;)});
						}&nbsp;else&nbsp;{
							aArgs.push(a[i],&nbsp;{&nbsp;&#39;@width&#39;:&nbsp;fEffect(aHeadSize.width&nbsp;+&nbsp;&quot;px&quot;)});
						}
						break;
				}
			});
			this._oTimer.abort();
			this._oTimer.start(function(){
				self._setExpanded(n);
				self._oTransition.abort().queue.apply(self._oTransition,&nbsp;aArgs).start(function(){
					/**
						Block이&nbsp;확장된&nbsp;후에&nbsp;발생
						
						@event&nbsp;expand
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@param&nbsp;{Number}&nbsp;nIndex&nbsp;Block의&nbsp;인덱스
						@param&nbsp;{HTMLElement}&nbsp;elBlock&nbsp;대상&nbsp;Block&nbsp;엘리먼트
						@param&nbsp;{HTMLElement}&nbsp;elHandler&nbsp;대상&nbsp;핸들러&nbsp;엘리먼트
						@example
							//&nbsp;expand&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링
							oAccordion.attach(&quot;expand&quot;,&nbsp;function(oCustomEvent)&nbsp;{
							});
					**/
					self.fireEvent(&quot;expand&quot;,&nbsp;ht);
				});
			},&nbsp;this.option(&quot;nExpandDelay&quot;));
		}
		return&nbsp;this;
	},
	
	/**
		모든&nbsp;Block을&nbsp;확장한다.
		
		@method&nbsp;expandAll
		@deprecated&nbsp;expand()&nbsp;메서드&nbsp;사용권장.
		@return&nbsp;{this}&nbsp;모든&nbsp;Block을&nbsp;확장한&nbsp;인스턴스&nbsp;자신
	**/
	expandAll&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this;
	},
	
	/**
		모든&nbsp;Block을&nbsp;축소한다.
		
		@method&nbsp;contractAll
		@return&nbsp;{this}&nbsp;모든&nbsp;Block을&nbsp;축소한&nbsp;인스턴스&nbsp;자신
	**/
	contractAll&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;self&nbsp;=&nbsp;this,
			fEffect&nbsp;=&nbsp;self.option(&quot;fContractEffect&quot;),
			aArgs&nbsp;=&nbsp;[this.option(&quot;nDuration&quot;)];

		jindo.$A(this.getAllBlocks()).forEach(function(o,i,a){
			var&nbsp;aHeadSize&nbsp;=&nbsp;self._getHeadSize(i);
			switch&nbsp;(self.option(&quot;sDirection&quot;))&nbsp;{
				case&nbsp;&quot;vertical&quot;&nbsp;:
					aArgs.push(a[i],&nbsp;{&nbsp;&#39;@height&#39;&nbsp;:&nbsp;fEffect(aHeadSize.height&nbsp;+&nbsp;&quot;px&quot;)&nbsp;});
					break;
				case&nbsp;&quot;horizontal&quot;&nbsp;:
					aArgs.push(a[i],&nbsp;{&nbsp;&#39;@width&#39;:&nbsp;fEffect(aHeadSize.width&nbsp;+&nbsp;&quot;px&quot;)});
					break;
			}
		});
		
		/**
			contractAll()이&nbsp;수행되어&nbsp;Block이&nbsp;축소되기&nbsp;전에&nbsp;발생
			
			@event&nbsp;beforeContract
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;Block이&nbsp;축소되지&nbsp;않음
			@example
				//&nbsp;beforeContract&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링
				oAccordion.attach(&quot;beforeContract&quot;,&nbsp;function(oCustomEvent)&nbsp;{
					oCustomEvent.stop();
				});
		**/
		if&nbsp;(this.fireEvent(&quot;beforeContract&quot;))&nbsp;{
			this._oTimer.start(function(){
				self._setExpanded(null);
				self._oTransition.abort().queue.apply(self._oTransition,&nbsp;aArgs).start(function(){
					/**
						Block이&nbsp;축소된&nbsp;후에&nbsp;발생
						
						@event&nbsp;contract
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@example
							//&nbsp;contract&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링
							oAccordion.attach(&quot;contract&quot;,&nbsp;function(oCustomEvent)&nbsp;{
								oCustomEvent.stop();
							});
					**/
					self.fireEvent(&quot;contract&quot;);
				});
			},&nbsp;this.option(&quot;nContractDelay&quot;));
		}
		return&nbsp;this;
	},
	
	_setExpanded&nbsp;:&nbsp;function(n)&nbsp;{
		this._nExpanded&nbsp;=&nbsp;n;
	},
	
	/**
		몇&nbsp;번째&nbsp;Block이&nbsp;확장되었는지&nbsp;가져온다.
		
		@method&nbsp;getExpanded
		@return&nbsp;{Number}&nbsp;확장된&nbsp;Block의&nbsp;인덱스&nbsp;(0부터&nbsp;시작)&nbsp;단,&nbsp;전체확장일&nbsp;경우&nbsp;&quot;all&quot;,&nbsp;전체&nbsp;축소일경우&nbsp;null
	**/
	getExpanded&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._nExpanded;
	},
	
	/**
		Block을&nbsp;가져온다.
		
		@method&nbsp;getBlock
		@param&nbsp;{Number}&nbsp;n&nbsp;엘리먼트를&nbsp;가져올&nbsp;Block의&nbsp;인덱스&nbsp;(0부터&nbsp;시작)
		@return&nbsp;{HTMLElement}&nbsp;지정한&nbsp;n번째&nbsp;Block의&nbsp;엘리먼트
	**/
	getBlock&nbsp;:&nbsp;function(n)&nbsp;{
		return&nbsp;this.getAllBlocks()[n];
	},
	
	/**
		모든&nbsp;Block을&nbsp;가져온다.
		
		@method&nbsp;getAllBlocks
		@return&nbsp;{Array}&nbsp;모든&nbsp;Block의&nbsp;엘리먼트&nbsp;배열
	**/
	getAllBlocks&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;jindo.$$(&quot;.&quot;&nbsp;+&nbsp;this.option(&quot;sClassPrefix&quot;)&nbsp;+&nbsp;&quot;block&quot;,&nbsp;this._el);
	},
	
	/**
		Block의&nbsp;Head를&nbsp;가져온다.&lt;br/&gt;
		Head는&nbsp;Block이&nbsp;축소되었을때도&nbsp;항상&nbsp;노출되는&nbsp;제목&nbsp;부분이다.
		
		@method&nbsp;getHead
		@param&nbsp;{Number}&nbsp;n&nbsp;Head&nbsp;를&nbsp;가져&nbsp;올&nbsp;Block의&nbsp;인덱스&nbsp;(0부터&nbsp;시작)
		@return&nbsp;{HTMLElement}&nbsp;지정한&nbsp;n번째&nbsp;Block의&nbsp;Head
	**/
	getHead&nbsp;:&nbsp;function(n)&nbsp;{
		return&nbsp;jindo.$$.getSingle(&quot;dt&quot;,&nbsp;this.getBlock(n));
	},
	
	/**
		Block의&nbsp;Body를&nbsp;가져온다.&lt;br/&gt;
		Body는&nbsp;Block이&nbsp;확장되었을때만&nbsp;노출되는&nbsp;내용&nbsp;부분이다.
		
		@method&nbsp;getBody
		@param&nbsp;{Number}&nbsp;n&nbsp;Body&nbsp;를&nbsp;가져&nbsp;올&nbsp;Block의&nbsp;인덱스&nbsp;(0부터&nbsp;시작)
		@return&nbsp;{HTMLElement}&nbsp;지정한&nbsp;n번째&nbsp;Block의&nbsp;Body
	**/
	getBody&nbsp;:&nbsp;function(n)&nbsp;{
		return&nbsp;jindo.$$.getSingle(&quot;dd&quot;,&nbsp;this.getBlock(n));
	},
	
	/**
		이벤트를&nbsp;처리할&nbsp;핸들러&nbsp;엘리먼트를&nbsp;가져온다.&lt;br/&gt;
		해당&nbsp;block의&nbsp;head내에&nbsp;클래스명&nbsp;&quot;handler&quot;&nbsp;를&nbsp;가진&nbsp;엘리먼트를&nbsp;리턴하고&nbsp;없을&nbsp;경우&nbsp;해당&nbsp;head를&nbsp;리턴한다.
		
		@method&nbsp;getHandler
		@param&nbsp;{Number}&nbsp;n&nbsp;핸들러&nbsp;엘리먼트를&nbsp;가져올&nbsp;block의&nbsp;인덱스&nbsp;(0부터&nbsp;시작)
		@return&nbsp;{HTMLElement}&nbsp;지정한&nbsp;n번째&nbsp;Block의&nbsp;핸들러&nbsp;엘리먼트
	**/
	getHandler&nbsp;:&nbsp;function(n)&nbsp;{
		var&nbsp;elHead&nbsp;=&nbsp;this.getHead(n);
		return&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;this.option(&quot;sClassPrefix&quot;)&nbsp;+&nbsp;&quot;handler&quot;,&nbsp;elHead)&nbsp;||&nbsp;elHead;
	}
}).extend(jindo.UIComponent);</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>